<template>
  <div class="dark_table" style="width: 100%">
    <el-table
      v-adaptive
      :data="tableData"
      style="width: 100%"
      border
      height="100px"
      size="small"
    >
      <el-table-column
        show-overflow-tooltip
        prop="taskNumber"
        label="任务号"
        align="center"
      />
      <el-table-column
        show-overflow-tooltip
        prop="chargeInTime"
        label="装炉时间"
        width="170"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.chargeInTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="出炉时间"
        align="center"
        width="170"
      >
        <template slot-scope="scope">
          <!-- {{ useOutTime(scope.row.outTime) || "-" }} -->
          {{ scope.row.outTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="零件号" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.partNumber">
            {{ scope.row.partNumber }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="batchNumber"
        label="批次号"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.batchNumber">
            {{ scope.row.batchNumber }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="processNumber"
        label="工序号"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.processNumber">
            {{ scope.row.processNumber }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="processName"
        label="工序名称"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.processName">
            {{ scope.row.processName }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="realPartCount"
        label="装炉件数"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.realPartCount || scope.row.realPartCount === 0">
            {{ scope.row.realPartCount }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="materialMark"
        label="材料牌号"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.materialMark">
            {{ scope.row.materialMark }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="craftVersion"
        label="工艺版次"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.craftVersion">
            {{ scope.row.craftVersion }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleCheck(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <OriginalDialog
      :formula-record-infos-list="formulaRecordInfosList"
      :assignment-token="assignmentToken"
      :device-row="controlDeviceInfo"
      :row="row"
      :visible.sync="visible"
    />
    <PrintDialog :visible.sync="printVisble"></PrintDialog>
  </div>
</template>

<script>
import OriginalDialog from "./OriginalDialog.vue";
import { formatDate } from "@/filter/index";
import { formulaRecordInfos } from "@/api/deviceOperation";
import PrintDialog from "./PrintDialog.vue";
import { mapGetters } from "vuex";
import _ from "lodash";
export default {
  components: { OriginalDialog, PrintDialog },
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false, // 原始记录表单
      row: {},
      formulaRecordInfosList: [],
      printVisble: false
    };
  },
  computed: {
    ...mapGetters(["controlDeviceInfo"]),
    // 设备toekn
    deviceToken() {
      return this.controlDeviceInfo.token;
    },
    // 分配token
    assignmentToken() {
      return this.controlDeviceInfo.assignmentToken;
    },
    useOutTime() {
      return function(times) {
        return times.map(item => formatDate(item)).join(",");
      };
    }
  },
  methods: {
    async handleCheck(row) {
      this.row = _.cloneDeep(row);
      // 远程监控的曲线表格
      const res = await formulaRecordInfos({
        formulaDownid: row.formulaDownId
      });
      const { results } = res.data;
      this.formulaRecordInfosList = _.sortBy(results, ["stageId"]);

      this.visible = true;
    }
  }
};
</script>

<style lang="scss" scoped></style>
